﻿@model SusuCMS.PageType
@using System.Text;
@using (Html.BeginForm())
{
    <dl class="form">
        <dt>
            @Html.LabelFor(m => m.Identifier)
        </dt>
        <dd>
            @Html.TextBoxFor(m => m.Identifier)
            @Html.ValidationMessageFor(m => m.Identifier)
        </dd>
        <dt>
            @Html.LabelFor(m => m.Name)
        </dt>
        <dd>
            @Html.TextBoxFor(m => m.Name)
            @Html.ValidationMessageFor(m => m.Name)
        </dd>
        <dt>
            @Html.LabelFor(m => m.TemplatePath)
        </dt>
        <dd>
            @Html.TextBoxFor(m => m.TemplatePath)
            @Html.ValidationMessageFor(m => m.TemplatePath)
        </dd>
        <dt>
            @Html.LabelFor(m => m.IsPublished)
            @Html.CheckBoxFor(m => m.IsPublished)
        </dt>
        <dt>Extension Forms @Html.HiddenFor(m => m.ExtensionForms)</dt>
        <dd class="extension-forms">
            <ul class="preview">
                @foreach (var control in Model.GetControls())
                {
                    var html = new StringBuilder();
                    html.AppendFormat("<li control-type='{0}' index='{1}'>", control.ControlType, control.Index);
                    html.AppendFormat("<label class='title'>{0}</label>", control.Title);
                    html.Append(control.GetHtml());
                    html.AppendFormat("<div class='actions'><a class='edit' href='javascript://'>{0}</a> <span>|</span> <a class='delete' href='javascript://'>{1}</a></div></li>", "Edit".Localize(), "Delete".Localize());
                    
                    @Html.Raw(html.ToString());
                }
            </ul>
            <div class="sidebar">
                <p>@("Add A Field".Localize())</p>
                <ul>
                    @foreach (var value in Enum.GetValues(typeof(ControlType)))
                    {
                        <li><a href="javascript://" control-type="@((int)value)">@(value.ToString().Localize())</a></li>
                    }
                </ul>
            </div>
            <div class="clearfix">
            </div>
        </dd>
        <dd>
            @Html.HiddenFor(m => m.WebsiteId)
            @Html.HiddenFor(m => m.ParentId)
            @Html.HiddenFor(m => m.Id)
            <button type="submit">@("Save".Localize())</button>
        </dd>
    </dl>
}
<script type="text/javascript">
    $(document).ready(function () {
        var preview = $('.extension-forms .preview');
        var maxIndex = $('.extension-forms .preview > li').length;
        var firstOption = '@("Frist Option".Localize())';
        var secondOption = '@("Second Option".Localize())';
        var thirdOption = '@("Third Option".Localize())';

        $('.extension-forms .sidebar li a').click(function () {
            var controlType = $(this).attr('control-type');
            var container = $($.format('<li index="{0}" control-type="{1}"></li>', maxIndex, controlType));
            switch (controlType) {
                case '1':
                    container.append($.format('<label class="title">@("Text".Localize())</label><input type="text" name="{0}" />', "Text" + maxIndex));
                    break;
                case '2':
                    container.append($.format('<label class="title">@("Paragraph".Localize())</label><textarea name="{0}"></textarea>', "Paragraph" + maxIndex));
                    break;
                case '3':
                    container.append('<label class="title">@("MultipleChoice".Localize())</label>')
                        .append($.format('<label><input type="radio" name="{0}" value="{1}"/>{1}</label>', "MultipleChoice" + maxIndex, firstOption))
                        .append($.format('<label><input type="radio" name="{0}" value="{1}"/>{1}</label>', "MultipleChoice" + maxIndex, secondOption))
                        .append($.format('<label><input type="radio" name="{0}" value="{1}"/>{1}</label>', "MultipleChoice" + maxIndex, thirdOption));
                    break;
                case '4':
                    container.append('<label class="title">@("CheckBoxList".Localize())</label>')
                        .append($.format('<label><input type="checkbox" name="{0}" value="{1}"/>{1}</label>', "CheckBoxList" + maxIndex, firstOption))
                        .append($.format('<label><input type="checkbox" name="{0}" value="{1}"/>{1}</label>', "CheckBoxList" + maxIndex, secondOption))
                        .append($.format('<label><input type="checkbox" name="{0}" value="{1}"/>{1}</label>', "CheckBoxList" + maxIndex, thirdOption));
                    break;
                case '5':
                    container.append('<label class="title">@("DropDownList".Localize())</label>')
                        .append($('<select />')
                                .append($.format('<option value="{0}">{0}</option>', firstOption))
                                .append($.format('<option value="{0}">{0}</option>', secondOption))
                                .append($.format('<option value="{0}">{0}</option>', thirdOption)));
                    break;
            }

            var actions = $('<div class="actions"></div>')
                            .append('<a href="javascript://" class="edit">@("Edit".Localize())</a> <span>|</span> ')
                            .append('<a href="javascript://" class="delete">@("Delete".Localize())</a>');

            preview.append(container.append(actions));
            maxIndex++;
        });

        // action delete
        $('.actions .delete', preview).live('click', function () {
            if (confirm('@("Do you want to delete it?".Localize())')) {
                $(this).parents('li:eq(0)').slideUp('slow', function () { $(this).remove(); });
            }
        });

        // action edit
        $('.actions .edit', preview).live('click', function () {
            var li = $(this).parents('li:eq(0)');
            var controlType = li.attr('control-type');

            if ($('.action-block', li).length) {
                $('.action-block', li).remove();
            } else {

                var block = $('<div class="action-block"><div class="arrow"><span>◆</span><span>◆</span></div><a title="@("Close".Localize())" class="close" href="javascript://">X</a></div>');
                block.find('.close').click(function () { block.remove(); });

                // title
                block.append('<label class="title">@("Title".Localize())</label>');
                $($.format('<input type="text" value="{0}"/>', li.find('label.title:eq(0)').text())).keyup(function () {
                    li.find('label.title:eq(0)').text($(this).val());
                }).appendTo(block);

                switch (controlType) {
                    case '1':
                        // name
                        block.append('<label class="title">Name</label>');
                        $($.format('<input type="text" value="{0}"/>', li.find('input[type=text]:eq(0)').attr('name'))).keyup(function () {
                            li.find('input[type=text]:eq(0)').attr('name', $(this).val());
                        }).appendTo(block);

                        break;
                    case '2':
                        // name
                        block.append('<label class="title">Name</label>');
                        $($.format('<input type="text" value="{0}"/>', li.find('textarea:eq(0)').attr('name'))).keyup(function () {
                            li.find('textarea:eq(0)').attr('name', $(this).val());
                        }).appendTo(block);

                        break;
                    case '3':
                        // name
                        block.append('<label class="title">Name</label>');
                        $($.format('<input type="text" value="{0}"/>', li.find('input[type=radio]:eq(0)').attr('name'))).keyup(function () {
                            li.find('input[type=radio]').attr('name', $(this).val());
                        }).appendTo(block);

                        // choices
                        block.append('<label class="title">@("Choices".Localize())</label>');
                        var _ul = $('<ul />');
                        $('input[type=radio]', li).each(function () {
                            var radio = $(this);
                            _ul.append($('<li></li>').append($.format('<input type="text" value="{0}"/>', radio.parent('label').text()))
                                .append('<a href="javascript://" class="add"></a>')
                                .append('<a href="javascript://" class="delete"></a>'));
                        });
                        block.append(_ul);
                        break;
                    case '4':
                        // name
                        block.append('<label class="title">Name</label>');
                        $($.format('<input type="text" value="{0}"/>', li.find('input[type=checkbox]:eq(0)').attr('name'))).keyup(function () {
                            li.find('input[type=checkbox]').attr('name', $(this).val());
                        }).appendTo(block);

                        // choices
                        block.append('<label class="title">@("Choices".Localize())</label>');
                        var _ul = $('<ul />');
                        $('input[type=checkbox]', li).each(function () {
                            var checkbox = $(this);
                            _ul.append($('<li />').append($.format('<input type="text" value="{0}"/>', checkbox.parent('label').text()))
                                .append('<a href="javascript://" class="add"></a>')
                                .append('<a href="javascript://" class="delete"></a>'));
                        });
                        block.append(_ul);
                        break;
                    case '5':
                        // name
                        block.append('<label class="title">Name</label>');
                        $($.format('<input type="text" value="{0}"/>', li.find('select:eq(0)').attr('name'))).keyup(function () {
                            li.find('select:eq(0)').attr('name', $(this).val());
                        }).appendTo(block);

                        // choices
                        block.append('<label class="title">@("Choices".Localize())</label>');
                        var _ul = $('<ul />');
                        $('option', li).each(function () {
                            var option = $(this);
                            _ul.append($('<li />').append($.format('<input type="text" value="{0}"/>', option.text()))
                                .append('<a href="javascript://" class="add"></a>')
                                .append('<a href="javascript://" class="delete"></a>'));
                        });
                        block.append(_ul);
                        break;
                }

                li.append(block);
            }
        });

        $('.action-block ul input[type=text]', preview).live('keyup', function () {
            var _li = $(this).parent('li');
            var index = _li.index();
            var parent = _li.parents('li:eq(0)');
            var controlType = parent.attr('control-type');
            switch (controlType) {
                case '3':
                    var label = parent.find('label').not('.title').eq(index);
                    var radio = label.find('input:radio').clone().val($(this).val());
                    label.empty().append(radio).append($(this).val());
                    break;
                case '4':
                    var label = parent.find('label').not('.title').eq(index);
                    var checkbox = label.find('input:checkbox').clone().val($(this).val());
                    label.empty().append(checkbox).append($(this).val());
                    break;
                case '5':
                    var option = parent.find('option').eq(index);
                    option.attr('value', $(this).val()).text($(this).val());
                    break;
            }
        });


        // action-block add
        $('.action-block .add', preview).live('click', function () {
            var _li = $(this).parent('li');
            var index = _li.index();
            _li.after(_li.clone());
            var parent = _li.parents('li:eq(0)');
            var controlType = parent.attr('control-type');
            switch (controlType) {
                case '3':
                    var radio = parent.find('input:radio').eq(index);
                    var label = radio.parent('label');
                    label.after($.format('<label><input type="radio" name="{0}"/>{1}</label>', radio.attr('name'), label.text()));
                    break;
                case '4':
                    var checkbox = parent.find('input:checkbox').eq(index);
                    var label = checkbox.parent('label');
                    label.after($.format('<label><input type="checkbox" name="{0}"/>{1}</label>', checkbox.attr('name'), label.text()));
                    break;
                case '5':
                    var option = parent.find('option').eq(index);
                    option.after($.format('<option value="{0}">{0}</option>', option.text()));
                    break;
            }
        });

        // action-block delete
        $('.action-block .delete', preview).live('click', function () {
            var _li = $(this).parent('li');
            var index = _li.index();
            var parent = _li.parents('li:eq(0)');
            var controlType = parent.attr('control-type');
            if (_li.siblings('li').length > 0) {
                if (controlType == '5') {
                    parent.find('option').eq(index).remove();
                }
                else {
                    parent.find('label').not('.title').eq(index).remove();
                }
                _li.remove();
            }
            else {
                alert('@("you can not delete all choices".Localize())');
            }
        });

        $('form').submit(function () {
            if (!$(this).valid()) {
                return false;
            }
            var list = new Array();
            $('.extension-forms .preview > li').each(function () {
                var li = $(this);
                var controlType = li.attr('control-type');
                var name = "";
                var data = "";
                var defaultValue = "";
                switch (controlType) {
                    case '1':
                        name = li.find('input[type=text]:eq(0)').attr('name');
                        defaultValue = li.find('input[type=text]:eq(0)').val();
                        break;
                    case '2':
                        name = li.find('textarea:eq(0)').attr('name');
                        defaultValue = li.find('textarea:eq(0)').val();
                        break;
                    case '3':
                        name = li.find('input[type=radio]:eq(0)').attr('name');
                        defaultValue = li.find('input[type=radio]:checked').val();
                        li.find('input[type=radio]').each(function () {
                            data += $(this).attr('value') + ',';
                        });
                        if (data != "") {
                            data = data.substr(0, data.length - 1);
                        }
                        break;
                    case '4':
                        name = li.find('input[type=checkbox]:eq(0)').attr('name');
                        li.find('input[type=checkbox]:checked').each(function () {
                            defaultValue += $(this).val() + ',';
                        });
                        if (defaultValue != "") {
                            defaultValue = defaultValue.substr(0, defaultValue.length - 1);
                        }
                        li.find('input[type=checkbox]').each(function () {
                            data += $(this).attr('value') + ',';
                        });
                        if (data != "") {
                            data = data.substr(0, data.length - 1);
                        }
                        break;
                    case '5':
                        name = li.find('select:eq(0)').attr('name');
                        defaultValue = li.find('select:eq(0)').val();
                        li.find('option').each(function () {
                            data += $(this).attr('value') + ',';
                        });
                        if (data != "") {
                            data = data.substr(0, data.length - 1);
                        }
                        break;
                }
                list.push({
                    ControlType: parseInt(controlType),
                    Title: li.find('label.title:eq(0)').text(),
                    Name: name,
                    Data: data,
                    Index: li.attr('index') == '' ? 0 : parseInt(li.attr('index')),
                    DefaultValue: defaultValue
                });
            });
            $('input[type=hidden][name=ExtensionForms]').val(JSON.stringify(list));

            $('.extension-forms .preview li *').attr('disabled', true);
        });
    });
</script>
